<template>
  <view class="index-container">
    <!-- 顶部导航栏 -->
    <custom-nav-bar title="行者无忧"></custom-nav-bar>

    <!-- 景点名称 -->
    <view class="sight-name">
      <swiper class="swiper-container" :autoplay="true" :interval="3000" indicator-dots="true" circular="true" 
        indicator-active-color="#ffffff" indicator-color="rgba(255,255,255,0.5)">
        <swiper-item v-for="(item, index) in carousels" :key="index">
          <image class="sight-name-image" :src="formatImageUrl(item.imageUrl)" mode="aspectFill" ></image>
          <view class="text-overlay">
            <text class="sight-name-text">{{ item.sightName }}</text>
          </view> 
        </swiper-item>
      </swiper>
    </view>

    <!-- 服务分类图标 -->
    <view class="service-icons">
      <view class="service-item" @click="navigateToService('hotel')">
        <view class="icon-circle">
          <image src="../../common/images/index/酒店.png" mode="aspectFit" class="service-icon"></image>
        </view>
        <text class="service-name">酒店</text>
      </view>
      <view class="service-item" @click="navigateToService('flight')">
        <view class="icon-circle">
          <image src="../../common/images/index/飞机.png" mode="aspectFit" class="service-icon"></image>
        </view>
        <text class="service-name">机票</text>
      </view>
      <view class="service-item" @click="navigateToService('train')">
        <view class="icon-circle">
          <image src="../../common/images/index/火车.png" mode="aspectFit" class="service-icon"></image>
        </view>
        <text class="service-name">火车票</text>
      </view>
      <view class="service-item" @click="navigateToService('highspeed')">
        <view class="icon-circle">
          <image src="../../common/images/index/动车.png" mode="aspectFit" class="service-icon"></image>
        </view>
        <text class="service-name">动车票</text>
      </view>
      <view class="service-item" @click="navigateToService('sight')">
        <view class="icon-circle">
          <image src="../../common/images/index/sight.png" mode="aspectFit" class="service-icon"></image>
        </view>
        <text class="service-name">景点</text>
      </view>
    </view>

    <!-- 景点推荐 -->
    <view class="hot-cities">
      <view class="section-header">
        <text class="section-title">景点推荐</text>
        <text class="more-link">更多</text>
      </view>

      <view class="city-content">
        <scroll-view scroll-x="true" class="city-scroll" show-scrollbar="false">
          <view class="city-list">
            <view class="city-item" v-for="(sight, index) in topRatedSights" :key="sight.sightId" @click="navigateToSightInfo(sight)">
              <image :src="formatImageUrl(sight.image)" mode="aspectFill" class="city-image"></image>
              <view class="city-tag">评分 {{ sight.rating }}</view>
              <text class="city-name">{{ sight.name }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 付费精选 -->
    <view class="premium-selection">
      <view class="section-header">
        <text class="section-title">付费精选</text>
        <text class="more-link">更多</text>
      </view>
      <view class="premium-list">
        <view class="premium-item" v-for="(item, index) in premiumItems" :key="item.sightId" @click="navigateToSightInfo(item)">
          <image :src="formatImageUrl(item.image)" mode="aspectFill" class="premium-image"></image>
          <view class="premium-info">
            <text class="premium-title">{{ item.name }}门票</text>
            <text class="premium-subtitle">{{ item.description }}</text>
            <!-- 星级评分 -->
            <view class="rating">
              <view class="stars">
                <uni-icons v-for="n in 5" :key="n" :type="n <= Math.floor(item.rating) ? 'star-filled' : 'star'" size="28" color="#faad14"></uni-icons>
              </view>
            </view>
            <view class="ticket-type">
                <text class="ticket-type-text">{{ getTicketTypeName(item.type) }}</text>
              </view>
            <view class="price-info">
              <text class="price">¥{{ item.price }}</text>
              <text class="price-desc"></text>
            </view>
            <!-- 上下两个固定的半圆 -->
             <view class="ticket-circle-top"></view>
             <view class="ticket-circle-bottom"></view>
             <!-- 黑色虚线-竖直 -->
              <view class="ticket-line"></view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 悬浮聊天按钮 -->
    <chat-bt :show-pulse="true"></chat-bt>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { sightApi } from '@/common/api/sight.js'
import { ticketApi } from '@/common/api/ticket.js'
import {carouselApi}  from '@/common/api/carousel.js'
import ChatBt from '@/components/chat-ai/chat-bt.vue'



// 轮播图数据
const carousels = ref([])

// 获取轮播图列表
const fetchCarousels = async () => {
  try {
    const res = await carouselApi.getCarousels()
    if(res.code === 200 && res.data && Array.isArray(res.data.list)){
    carousels.value = res.data.list
    }

  } catch (error) {
    console.error('获取轮播图失败:', error)
    // 可以在这里添加错误处理逻辑，例如显示错误提示
  }
}



// 评分最高景点数据
const topRatedSights = ref([])

// 付费精选数据
const premiumItems = ref([])

// 格式化图片URL，去除多余的反引号和空格
const formatImageUrl = (image) => {
  if (!image) return '/static/logo.png'
  // 只去除前后的反引号和空白字符，确保不影响URL其他部分
  const cleanedImage = image.replace(/[`]/g, '').trim()
  return cleanedImage
}

// 票类型转换方法
const getTicketTypeName = (type) => {
  const typeMap = {
    'adult': '成人票',
    'child': '儿童票',
    'student': '学生票',
    'senior': '老人票',
    'group': '团体票'
  }
  return typeMap[type] || type
}

// 获取评分最高景点数据
const fetchTopRatedSights = async () => {
  try {
    const res = await sightApi.getTopRatedSights()
    if (res.data && Array.isArray(res.data)) {
      topRatedSights.value = res.data
    }
  } catch (error) {
    console.error('获取评分最高景点失败:', error)
    // 可以在这里添加错误处理逻辑，例如显示错误提示
  }
}

// 获取推荐门票数据
const fetchRecommendedTickets = async () => {
  try {
    const res = await ticketApi.getRecommendedTickets()
    if (res.code === 200 && res.data && Array.isArray(res.data)) {
      // 保留原始数据结构，确保包含sightId
      premiumItems.value = res.data
    }
  } catch (error) {
    console.error('获取推荐门票失败:', error)
    // 错误时使用默认数据，避免白屏
    premiumItems.value = [
      {
        sightId: 1,
        name: '千图王国',
        price: '223',
        image: '/static/logo.png',
        type: 'adult',
        rating: 4.5,
        description: '千图王国是一个历史悠久的国家，以其丰富的文化和历史而闻名。'
      },
      {
        sightId: 2,
        name: '千图王国',
        price: '223',
        image: '/static/logo.png',
        type: 'adult',
        rating: 4.5,
        description: '千图王国是一个历史悠久的国家，以其丰富的文化和历史而闻名。'
      }
    ]
  }
}

// 跳转到景点详情页面
const navigateToSightInfo = (item) => {
  if (item && item.sightId) {
    try {
      uni.navigateTo({
        url: `/pages/plan/sight-info?sightId=${item.sightId}`,
        success: () => {
          console.log('导航到景点详情成功，sightId:', item.sightId)
        },
        fail: (err) => {
          console.error('导航失败:', err)
          uni.showToast({
            title: '导航失败',
            icon: 'none'
          })
        }
      })
    } catch (error) {
      console.error('导航过程中发生错误:', error)
    }
  }
}

// 处理项目点击事件，支持不同类型的导航

// 导航到服务页面
const navigateToService = (serviceType) => {
  switch(serviceType) {
    case 'hotel':
      uni.showToast({
        title: '酒店预订功能开发中',
        icon: 'none'
      })
      break
    case 'flight':
      uni.showToast({
        title: '机票预订功能开发中',
        icon: 'none'
      })
      break
    case 'train':
      uni.showToast({
        title: '火车票预订功能开发中',
        icon: 'none'
      })
      break
    case 'highspeed':
      uni.showToast({
        title: '动车票预订功能开发中',
        icon: 'none'
      })
      break
    case 'sight':
    case 'ticket':
      // 跳转到景点门票页面（已实现）
      uni.switchTab({
        url: '/pages/plan/plan'
      })
      break
    default:
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchCarousels()
  fetchTopRatedSights()
  fetchRecommendedTickets()
  console.log('topRatedSights:', topRatedSights.value)
})
</script>

<style lang="scss" scoped >
// 主容器
.index-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20rpx;
  
  
  // 景点名称
  .sight-name {
    width: 100%;
    height: 500rpx; // 设置合适的高度
    position: relative;
    overflow: hidden;
    
    .swiper-container {
      width: 100%;
      height: 100%;
      
      .sight-name-image {
        width: 100%;
        height: 100%;
      }
      
      .text-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 30rpx;
        background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); // 添加渐变背景，让文字更清晰
        
        .sight-name-text {
          font-size: 36rpx;
          font-weight: bold;
          color: #fff;
          text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3); // 添加文字阴影，提高可读性
        }
      }
      
      // 自定义轮播指示器样式
      .uni-swiper-dots {
        bottom: 30rpx; // 调整指示器位置
      }
      
      .uni-swiper-dot {
        width: 20rpx; // 指示器宽度
        height: 8rpx; // 指示器高度
        border-radius: 4rpx; // 圆角，可改为圆形
        margin: 0 10rpx; // 间距
        transition: all 0.3s; // 添加过渡效果
      }
      
      .uni-swiper-dot-active {
        width: 30rpx; // 激活状态的宽度
        background-color: #ffffff; // 激活状态的颜色
      }
    }
  }
  
  // 服务分类图标
  .service-icons {
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    padding: 40rpx 20rpx;
    margin-top: 20rpx;
    
    .service-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.2s;
      
      &:active {
        transform: scale(0.95);
      }
      
      .icon-circle {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 16rpx;
        box-shadow: 0 4rpx 12rpx rgba(90, 158, 249, 0.15);
        
        .service-icon {
          width: 60rpx;
          height: 60rpx;
          display: block;
        }
      }
      
      .service-name {
        font-size: 26rpx;
        color: #666;
        font-weight: 400;
      }
    }
  }
  
  // 热门城市
  .hot-cities {
    margin-top: 20rpx;
    background-color: #fff;
    padding: 10rpx 0;
    padding-bottom: 30rpx;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 30rpx;
      
      .section-title {
        font-size: 36rpx;
        font-weight: bold;
      }
      
      .more-link {
        font-size: 28rpx;
        color: #999;
      }
    }
    
    .city-content {
      padding: 0 30rpx;
    }
    
    .city-scroll {
       width: 100%;
       white-space: nowrap;
       display: flex;
       flex-direction: row;
       overflow-x: auto;
       -webkit-overflow-scrolling: touch; // 启用iOS平滑滚动
       scroll-behavior: smooth; // 平滑滚动效果
     }
     
     .city-list {
       display: inline-flex;
       padding-bottom: 20rpx;
     }
     
     .city-item {
       width: 340rpx;
       margin-right: 20rpx;
       position: relative;
       background-color: #f9f9f9;
       border-radius: 15rpx;
       overflow: hidden;
       display: inline-block; // 关键：确保每个item是行内块元素
       vertical-align: top;
       height: 400rpx; // 设置固定高度
     }
    
    .city-image {
      width: 100%;
      height: 100%; // 图片填满整个容器
      border-radius: 15rpx;
      display: block;
    }
    
    .city-tag {
      position: absolute;
      bottom: 80rpx;
      left: 20rpx;
      background-color: rgba(255, 255, 255, 0.8);
      color: #333;
      padding: 5rpx 15rpx;
      border-radius: 10rpx;
      font-size: 28rpx;
    }
    
    .city-name {
      position: absolute;
      bottom: 20rpx;
      left: 20rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: #fff;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
    }
    
    .city-desc {
      font-size: 24rpx;
      color: #666;
      padding: 0 15rpx 15rpx 15rpx;
      display: block;
    }
  }
  
  // 付费精选
  .premium-selection {
    margin-top: 20rpx;
    background-color: #fff;
    padding: 10rpx 0;
    padding-bottom: 30rpx;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 30rpx;
      
      .section-title {
        font-size: 36rpx;
        font-weight: bold;
      }
      
      .more-link {
        font-size: 28rpx;
        color: #999;
      }
    }
    
    .premium-list {
      padding: 0 30rpx;
    }
    
    .premium-item {
      display: flex;
      background-color: #fff;
      border-radius: 15rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
      margin-bottom: 30rpx;
      overflow: hidden;
      position: relative;
      
      .ticket-circle-top {
        position: absolute;
        top: -15rpx;
        left: -12rpx;
        width: 30rpx;
        height: 30rpx;
        background-color: #fff;
        border-radius: 50%;
      }
      
      .ticket-circle-bottom {
        position: absolute;
        bottom: -15rpx;
        left: -12rpx;
        width: 30rpx;
        height: 30rpx;
        background-color: #fff;
        border-radius: 50%;
      }
      .ticket-line {
        position: absolute;
        top: 50%;
        left: 0rpx;
        width: 8rpx;
        height: 80%;
        background-color: #c3e5f7;
        transform: translateY(-50%);
        border-radius: 2.5rpx;
      }
      
      .premium-image {
        width: 280rpx;
        height: 280rpx;
        flex-shrink: 0;
      }
      
      .premium-info {
        flex: 1;
        padding: 20rpx 30rpx;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      
      .premium-title {
        font-size: 36rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .premium-subtitle {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 20rpx;
        // 多行文本省略
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .price-info {
        position: absolute;
        bottom: 20rpx;
        right: 30rpx;
        
        .price {
          font-size: 40rpx;
          font-weight: bold;
          color: #ff4d4f;
        }
        
        .price-desc {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .ticket-type {
        position: absolute;
        top: 20rpx;
        right: 30rpx;
        
        .ticket-type-text {
          background-color: #e6f7ff;
          color: #1890ff;
          padding: 4rpx 20rpx;
          border-radius: 15rpx;
          font-size: 24rpx;
        }
      }
      
      // 星级评分样式
      .rating {
        display: flex;
        align-items: center;
        margin-bottom: 15rpx;
        
        .stars {
          display: flex;
          font-size: 28rpx;
          color: #faad14;
          margin-right: 10rpx;
          
          .star-icon {
            margin-right: 2rpx;
          }
        }
      }
    }
  }
}

// 退出登录按钮样式
.logout-button {
  width: 80%;
  margin: 30rpx auto;
  background-color: #fff;
  color: #FF6B6B;
  border: 1px solid #FF6B6B;
  font-size: 32rpx;
  border-radius: 8rpx;
}
</style>


